<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

		<title>User Center</title>
		<script type="text/javascript" src="../js/jquery1.7.2.js"></script>
		<script type="text/javascript" src="../js/si.files.js"></script>
		<link href="../css/usercenter.css" type="text/css" rel="stylesheet"/>
		 <script type="text/javascript">
		 $(document).ready(function(){
		 	$("#header").load("common/uc_header.html");
		 	$("#footer").load("common/uc_footer.html");
		 });
		SI.Files.stylizeAll();
		 </script>
		 <style type="text/css" title="text/css">
/* <![CDATA[ */

.SI-FILES-STYLIZED label.cabinet
{
	width: 79px;
	height: 22px;
	background: url(../img/btn-choose-file.gif) 0 0 no-repeat;
	float:left;
	display: block;
	overflow: hidden;
	cursor: pointer;
}

.SI-FILES-STYLIZED label.cabinet input.file
{
	position: relative;
	height: 100%;
	width: auto;
	opacity: 0;
	-moz-opacity: 0;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

/* ]]> */
</style>
	</head>

	<body>
		<div id="header">
			
		</div>
			
		<div class="container">
			<div class="sidebar choosephoto">
				<div class="photo_container">
					<h4>Upload ur photo:</h4>
					<div class="photo">
						<img src="photos/alligator-icon.png">
					</div>
					<div class="choosefile">
					<form action="#">
				
				<label class="cabinet"> 
					<input type="file" class="file" style="top: 0px; left: -127px;">
				</label>
				<input type="button" value="Upload" />
			</form>
			</div>
				</div>
				
			</div>
			<div class="content choosephoto">
				<h4>Or choose one:</h4>
				<ul>
					<li>
						<div class="photo_container">
					<div class="photo">
						<img src="photos/alligator-icon.png">
					</div>
					<input id="type1" type="radio" name="photo"/></div>
					</li>
						<li>
						<div class="photo_container">
					<div class="photo">
						<img src="photos/angry-bird-icon128.png">
					</div>
					<input id="type2" type="radio" name="photo"/></div>
					</li>
						<li>
						<div class="photo_container">
					<div class="photo">
						<img src="photos/Bono-icon128.png">
					</div>
					<input id="type3" type="radio" name="photo"/></div>
					</li>
						<li>
						<div class="photo_container">
					<div class="photo">
						<img src="photos/Hat-icon128.png">
					</div>
					<input id="type4" type="radio" name="photo"/></div>
					</li>
						<li>
						<div class="photo_container">
					<div class="photo">
						<img src="photos/monster-green-icon128.png">
					</div>
					<input id="type5" type="radio" name="photo"/></div>
					</li>
						<li>
						<div class="photo_container">
					<div class="photo">
						<img src="photos/soccer-football-stadium-icon128.png">
					</div>
					<input id="type6" type="radio" name="photo"/></div>
					</li>
				</ul>
				<div class="clearfloat"></div>
				<input type="button" value="Submit" />
		
			</div>
			
			<div class="clearfloat"></div>
<script type="text/javascript">
$("#listbody div.list").hover(
	function(){$(this).addClass('listhover');$(this).find(".bar").css('visibility','visible');},
	function(){$(this).removeClass('listhover');$(this).find(".bar").css('visibility','hidden');}
);
</script>

	</div>



		<div id="footer">
			
		</div>
	</body>
</html>
